<script setup lang="ts">
    import { api } from '@/services/api';
    import { ref, watch, reactive, onMounted } from 'vue';
    import { UserInfo } from '@/services/type';
    import { useUserStore } from '@/stores/user';

    // 属性
    const { yhnm } = defineProps<{yhnm: string}>();

    const userStore = useUserStore();

    // 渲染数据
    let data = reactive<UserInfo[]>([]);
    // 初始化加载中
    const loading = ref(true);
    // 是否最后一页
    const isLast = ref(false);
    // 游标值
    const cursor = ref('');
    // 是否选择
    const isSelected = ref(true);
    // 加载参数
    const loadMoreParam = reactive({
        loadName: "点击加载更多",
        loading: false,
        disabled: false
    });

    watch(
        () => isSelected.value, 
        (to: any) => {
            data.length = 0;
            cursor.value = '';
            if(to) {
                queryMyFans();
            } else {
                queryMyFollow();
            }
        }
    );

    // 查询指定用户关注列表
    const queryMyFollow = async () => {
        const response = await api.follow.queryMyFollow({
            // 用户内码
            yhnm,
            // 游标值
            cursor: cursor.value,
            // 分页数量
            pageSize: 10
        });
        if(response.code === 0) {
            // 结果赋值
            data.push(...response.data.list);
            // 是否最后一页
            isLast.value = response.data.isLast;
            // 游标值
            cursor.value = response.data.cursor;
            // 如果是最后一页
            if(isLast.value) {
                loadMoreParam.loadName = "已经到底了";
                loadMoreParam.disabled = true;
            }
            loadMoreParam.loading = false;
        }
    }

    // 查询指定用户粉丝列表
    const queryMyFans = async () => {
        const response = await api.follow.queryMyFans({
            // 用户内码
            yhnm,
            // 游标值
            cursor: cursor.value,
            // 分页数量
            pageSize: 10
        });
        if(response.code === 0) {
            // 结果赋值
            data.push(...response.data.list);
            // 是否最后一页
            isLast.value = response.data.isLast;
            // 游标值
            cursor.value = response.data.cursor;
            // 如果是最后一页
            if(isLast.value) {
                loadMoreParam.loadName = "已经到底了";
                loadMoreParam.disabled = true;
            }
            loadMoreParam.loading = false;
        }
    }

    // 关注
    const handleFollow = async (yhnm?: string, is_follow?: boolean) => {
        const response = await userStore.follow(yhnm, is_follow);
        if(response.code === 0) {
            // 获取用户信息
            const item = data.find((item) => item.yhnm === yhnm);
            if(item) {
                // 变更关注状态
                item.is_follow = !is_follow;
            }
        }
    }

    onMounted(async () => {
        // 初始化数据
        await queryMyFans();
        // 初始化加载结束
        loading.value = false;
    });

</script>
<template>
    <div class="follow-box">
        <div class="profile-tab">
            <span class="item" :class="isSelected ? 'selected' : ''" @click="isSelected = true">Ta的关注</span>
            <el-divider direction="vertical" />
            <span class="item" :class="isSelected ? '' : 'selected'" @click="isSelected = false">Ta的粉丝</span>
        </div>
        <div class="nodata" v-if="data.length == 0">
            <svg-icon href='#icon-nodata' width="250px" height="250px"></svg-icon>
            <br/>
            <span style='color: darkcyan;'>-暂无关注-</span>
        </div>
        <ul class="user-data" v-if="data.length != 0">
            <li class="user-data-item"  v-for="(item, index) in data" :key="index">
                <div class="user-icon">
                    <img :src="item.avatar" />
                </div>
                <div class="user-main-body">
                    <div class="user-name">
                        <a :href="'/u/' + item.yhnm">{{ item.nickName }}</a>
                    </div>
                    <span class="signature">{{ item.signature ? item.signature : '这个人很懒，什么都没有留下！' }}</span>
                    <ul class="number-board">
                        <li class="number-board-item">
                            <a :href="'/u/' + item.yhnm + '#article_tab'">
                                <span class="number-board-name">{{ item.tj_info.article_num }}&nbsp;文章</span>
                            </a>
                        </li>
                        <li class="number-board-item">
                            <a :href="'/u/' + item.yhnm + '#comment_tab'">
                                <span class="number-board-name">{{ item.tj_info.comment_num }}&nbsp;评论</span>
                            </a>
                        </li>
                        <li class="number-board-item">
                            <a :href="'/u/' + item.yhnm + '#follow_tab'">
                                <span class="number-board-name">{{ item.tj_info.attention_num }}&nbsp;粉丝</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="btn">
                    <div>
                        <el-button 
                            :type="!item.is_follow ? 'primary' : ''" 
                            @click="handleFollow(item.yhnm, item.is_follow)" 
                            :color="item.is_follow ? '#8a919f' : ''"
                            plain
                        >
                            <template v-if="!item.is_follow">
                                <el-icon><Plus /></el-icon>&nbsp;关注
                            </template>
                            <template v-if="item.is_follow">
                                <el-icon><Check /></el-icon>&nbsp;已关注
                            </template>
                        </el-button>
                    </div>
                    <div><el-button type="info"><el-icon class="el-icon--left"><Message /></el-icon>&nbsp;私信</el-button></div>
                </div>
            </li>
        </ul>
        <div class="load-more" v-if="data.length != 0">
            <el-button type="primary" 
                :loading="loadMoreParam.loading" 
                style="margin-top: 15px;width: 150px;"
                :disabled="loadMoreParam.disabled"
            >
                {{loadMoreParam.loadName}}
            </el-button>
        </div>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />